<template>
  <div class="zb-pro-table">
    <div class="header" v-if="formSearchData.length">
      <el-form
        :inline="true"
        class="search-form"
        :class="{ 'is-expand': isExpand }"
        :model="formInline"
        ref="ruleFormRef"
        label-width="auto"
      >
        <template v-for="(item, index) in formSearchData" :key="index">
          <el-form-item
            v-show="isExpand ? isExpand : index < 2"
            style="margin: 3px 3px 3px 0px"
            :label="item.valueType ? item.label : ''"
          >
            <!--  -->
            <template v-if="item.valueType === 'input'">
              <el-input
                v-model="formInline[item.name]"
                :placeholder="`请输入${item.label}`"
                clearable
                @keyup.enter="onSubmit"
              />
            </template>

            <template v-if="item.valueType === 'cascader'">
              <el-cascader
                v-model="formInline[item.name]"
                :options="item.options"
                :props="item.propsExpandTrigger"
                clearable
                :style="{ width: item.width }"
                :show-all-levels="false"
              >
              </el-cascader>
            </template>
            <template v-if="item.valueType === 'select'">
              <el-select
                v-model="formInline[item.name]"
                :placeholder="`请选择${item.label}`"
                :style="{ width: item.width }"
                clearable
              >
                <el-option
                  v-for="ite in item.options"
                  :key="ite.value"
                  :label="ite.label"
                  :value="ite.value"
                />
              </el-select>
            </template>
            <!-- 时间  开始时间-结束时间 -->
            <template v-else-if="item.valueType === 'daterange'">
              <el-date-picker
                v-model="formInline[item.name]"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :placeholder="`请选择${item.label}`"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </template>
            <!-- 时间  -->
            <template v-else-if="item.valueType === 'datetime'">
              <el-date-picker
                v-model="formInline[item.name]"
                type="datetime"
                :placeholder="`请选择${item.label}`"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </template>

            <template v-else>
              <slot :name="item.name" :item="item"></slot>
            </template>
          </el-form-item>
        </template>
        <slot name="otherSearch"></slot>
      </el-form>

      <div class="search">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reset(ruleFormRef)">重置</el-button>
        <!-- v-hasPermi="[`${permissionPrefix}:export`]" -->
        <!---->
        <el-button @click="exportExcelAction"  v-if="props.show === true" >导出</el-button>
        <el-button link type="primary" @click="isExpand = !isExpand"
          >{{ isExpand ? "合并" : "展开"
          }}<el-icon>
            <arrow-down v-if="!isExpand" />
            <arrow-up v-else /> </el-icon
        ></el-button>
      </div>
    </div>
    <!----------底部---------------------->
    <div class="footer">
      <!-----------工具栏操作工具----------------->
      <div class="operator" v-if="slots.btn">
        <slot name="btn"></slot>
      </div>
      <!------------- 标题文字 ----------------- -->
      <div class="tabl-title" v-if="slots.title">
        <slot name="title"></slot>
      </div>

      <!-- default-expand-all -->
      <!-- ------------表格--------------->
      <div class="table">
        <el-table
          class="zb-table"
          v-loading="loading"
          :border="true"
          stripe
          @selection-change="selectChange"
          :data="list"
          row-key="id"
        >
          <template v-for="item in columns">
            <template v-if="item.isExport"> </template>
            <template v-else-if="item.type">
              <el-table-column
                :key="item.id"
                v-bind="{ ...item }"
                align="center"
              />
            </template>

            <!-- <template v-else-if="item.h"></template> -->

            <template v-else>
              <el-table-column
                :key="item.id"
                align="center"
                v-bind="{ ...item }"
                show-overflow-tooltip
              >
                <template #default="scope">
                  <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
                  <slot
                    v-else
                    :name="item.name"
                    :item="item"
                    :row="scope.row"
                  ></slot>
                </template>
              </el-table-column>
            </template>
          </template>
        </el-table>
      </div>
      <!-- ------------分页--------------->
      <div class="pagination" v-if="props.total">
        <el-pagination
          v-model:currentPage="currentPage1"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="props.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, reactive, PropType, onMounted, useSlots } from "vue";
import { Search } from "@element-plus/icons-vue";

import type {
  FormInstance,
  TableColumnCtx,
  PaginationProps,
} from "element-plus";

//@ts-ignore
import { exportExcel } from "@/utils/exprotExcel";
//@ts-ignore
import { usePage } from "@/composables";

const props = defineProps({
  columns: {
    type: Array as PropType<
      (Partial<TableColumnCtx<any>> & { [Key: string]: any })[]
    >,
    default: () => [],
  },
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  total: {
    type: Number,
    default: 0,
  },
  permissionPrefix: {
    type: String,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  show: {
    type: Boolean,
    default: true,
  },
  isExpand: {
    type: Boolean,
    default: false,
  },
});

const { page: currentPage1, size: pageSize } = usePage({
  size: props.pageSize,
});
const slots = useSlots();

const ruleFormRef = ref<FormInstance>();
const emit = defineEmits([
  "reset",
  "onSubmit",
  "selection-change",
  "handleSizeChange",
  "handleCurrentChange",
  "exportExcelAction",
]);

const propsExpandTrigger = {
  expandTrigger: "hover" as const,
  // emitPath: false,
  checkStrictly: true,
};

// 收缩展开
const isExpand = ref(props.isExpand);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  emit("handleSizeChange", pageSize.value);
};
const handleCurrentChange = (val: number) => {
  currentPage1.value = val;
  emit("handleCurrentChange", currentPage1.value);
};

const list = computed(() => {
  let arr = JSON.parse(JSON.stringify(props.data));
  return arr;
});

const confirmEdit = (row) => {
  row.edit = false;
};
const cancelEdit = (row) => {
  row.edit = false;
};

let obj = {};
let search = [];
for (let item of props.columns) {
  if (item.inSearch) {
    obj[item.name] = null;
  }
  if (item.inSearch) {
    search.push(item);
  }
}
const formSearchData = ref(search);
const formInline = reactive(obj);

const onSubmit = () => {
  console.log("submit!", formInline);
  emit("onSubmit", formInline);
};

const reset = (formEl: FormInstance | undefined) => {
  formSearchData.value.forEach((item) => {
    formInline[item.name] = null;
  });
  emit("reset", formInline);
};

const selectChange = (val) => emit("selection-change", val);

const exportExcelAction = () => {
  console.log("submit!", formInline);
  emit("exportExcelAction", formInline);
};

defineExpose({ pageSize });
</script>
<!-- <style>
.el-date-editor {
  --el-date-editor-width: 200px !important;
}
</style> -->


<style scoped lang="scss">
.edit-input {
  padding-right: 30px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
:deep(.el-table__header th.el-table__cell) {
  text-align: center;
}
// :ddep(.el-select .el-input){
//   width:199px !important;
// }
.zb-pro-table {
  width: 100%;
  // height: 100%;

  // max-height: calc(100vh - 50px - 39px);
  max-height: 85vh;
  height: 84vh;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    border: 1px solid #e4e7ed;
    .el-form {
      height: 38px;
      overflow: hidden;
      &.is-expand {
        height: auto;
      }
    }
    .head-form {
      flex: 1;
      overflow: hidden;
    }
    :deep() {
      .el-input {
        max-width: 180px;
      }
      .el-select .el-input {
        width: 180px;
      }
      .el-form-item__content > .el-input {
        width: 180px;
      }
    }
    .search {
      flex-shrink: 0;
      white-space: nowrap;
    }
  }

  // .header {
  //   display: flex;
  //   padding: 16px 16px 16px 16px;
  //   margin-bottom: 16px;
  //   border-radius: 4px;
  //   background: white;
  //   box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  //   .search-form {
  //     max-width: 80vw;
  //     display: flex;
  //     flex-wrap: wrap;

  //     :deep(.el-input) {
  //       width: 180px !important;
  //     }
  //     :deep(.el-select) {
  //       width: 180px !important ;
  //     }
  //   }
  //   .search {
  //     flex-shrink: 0;
  //     white-space: nowrap;
  //   }
  // }

  .footer {
    flex: 1;
    display: flex;
    padding: 16px;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    min-height: 300px;
    .operator {
      margin-bottom: 15px;
    }
    .table {
      position: relative;
      flex: 1;
    }
    .zb-table {
      position: absolute;
      height: 100%;
    }
  }
  :deep(.el-table__header th) {
    font-size: 15px;
    font-weight: 700;
    color: #252525;
  }
  .pagination {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-top: 10px;
    box-sizing: border-box;
  }
}
</style>
